﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"><img src="/images/AppLogoSmall.png" /> <div class="small">by MCNEXT</div></span>
            </h1>
        </header>

        <section aria-label="Main content" role="main" data-win-control="MCNEXT.UI.GridControl" data-win-options="{autolayout: true, cellSpace: 5}">
            <div id="semanticzoom" class="mcn-fullsize" data-win-control="WinJS.UI.SemanticZoom">
                <div id="zoomedIn" class="mcn-fullsize" data-win-control="MCNEXT.UI.SemanticZoomWrapper">
                    <div id="pageHub" class="mcn-fullsize" data-win-control="MCNEXT.UI.HubControl" data-win-options="{multipass: 'item'}">
                        <div class="mcn-hub-surface">
                            <div id="sectionIntro" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>What is it ?</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                                    <div class="sectionSummary">
                                        <p>WinJS Contrib is a set of tools, helpers and controls to complement WinJS, and help you build native HTML5 applications for Windows 8, Windows Phone 8.1 and iOS and Android through Apache Cordova.</p>
                                        <p>WinJS is a great framework for building your native applications, but it lacks some features that we find valuable for expressiveness or productivity.</p>
                                        <p>This application will walk you through most features in the library.</p>
                                    </div>
                                    <div class="link big" data-page-weblink="http://winjscontrib.codeplex.com">
                                        <h3>Check sources on codeplex</h3>
                                        <p>All sources for WinJS Contrib libraries and for this app are available on codeplex</p>
                                    </div>
                                    <div class="link big" data-page-weblink="http://www.nuget.org/packages?q=winjscontrib">
                                        <h3>It's modular</h3>
                                        <p>All parts are distributed as separate NuGet packages. Take the one that suits your needs.</p>
                                    </div>
                                    <div class="link big" data-page-weblink="http://www.buildwinjs.com">
                                        <h3>Never heard about WinJS ?</h3>
                                        <p>Visit WinJS offical website and discover its features.</p>
                                    </div>
                                    <!--<div class="link big" data-page-weblink="http://www.nuget.org">
                                    <h3>Cross platform (soon)</h3>
                                    <p>WinJS is reshaping itself to be able to work flawlessly on multiple devices, most notably Android and iOS, and so is WinJS Contrib !</p>
                                </div>-->
                                </div>
                            </div>
                            <div id="sectionBindings" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>WinJSContrib.Core</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                                    <div class="sectionSummary">
                                        <p>The core package contains many useful bits, like helpers and custom bindings.</p>
                                        <p>Those Bindings help provide some common feature (ellipses on text, dates, images, etc). You will also find some two way binding to help you manage dataforms</p>
                                    </div>
                                    <div class="link" data-page-link="/pages/bindings/objectproperties/objectproperties.html">
                                        object properties utilities
                                    </div>
                                    <div class="link" data-page-link="/pages/bindings/arguments/arguments.html">
                                        parameterized bindings
                                    </div>
                                    <div class="link" data-page-link="/pages/bindings/showhide/showhide.html">
                                        bindings for show, hide, disable
                                    </div>
                                    <div class="link" data-page-link="/pages/bindings/images/images.html">
                                        Binding on images
                                    </div>
                                    <div class="link" data-page-link="/pages/bindings/dates/dates.html">
                                        Binding on dates
                                    </div>
                                    <div class="link" data-page-link="/pages/bindings/twoway/twoway.html">
                                        Two way bindings
                                    </div>
                                    <div class="link" data-page-link="/pages/alerts/alerts.html">
                                        Prompt, dialog, alerts, ...
                                    </div>
                                    <div class="link" data-page-link="/pages/core/messenger/messenger.html">
                                        Communicate with iframes or web workers
                                    </div>
                                    
                                    <!--<div class="link">
                                    animations <p>(doc under construction, please check source code)</p>
                                </div>
                                    <div class="link">
                                    protocol activation <p>(doc under construction, please check source code)</p>
                                </div>
                                <div class="link">
                                    string helpers <p>(doc under construction, please check source code)</p>
                                </div>-->
                                </div>
                            </div>

                            <div id="sectionCore" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>Custom navigator (WinJSContrib.Navigator)</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                                    <div class="sectionSummary">
                                        <p>Our custom navigator adds small features aggregated to your pages through a custom control. This navigator manages a lot more than the one you find in Visual Studio project templates.</p>
                                        <p>With this custom navigator, you will have exit page transitions, binding for interactive elements on page's functions, or manage your event listeners to avoid memory leaks.</p>
                                        <p>It also introduce some custom page events to help you manage your screens without relying to much on setImmediate or the Scheduler.</p>
                                    </div>
                                    <div class="link" data-page-link="/pages/core/pageactions/pageactions.html">
                                        Page actions and page links
                                    </div>
                                    <div class="link" data-page-link="/pages/core/pageevents/pageevents.html">
                                        custom page events
                                    </div>
                                    <div class="link" data-page-link="/pages/core/blockingnavigation/blockingnav.html">
                                        prevent navigation in a page
                                    </div>
                                    <div class="link" data-page-link="/pages/core/eventtracker/eventtracker.html">
                                        events & Event tracker
                                    </div>
                                    <!--<div class="link" data-page-link="/pages/core/layoutcontrols/layoutcontrols.html">
                                    layout aware controls <p>(doc under construction, please check source code)</p>
                                </div>-->
                                </div>
                            </div>

                            <div id="sectionListView" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>WinJSContrib.ListViewLayout</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                                    <div class="link big" data-page-link="/pages/listlayout/home.html">
                                        <h3>Declarative layout</h3>
                                        <p>Ever wanted to manage ListView layouts without code when your screen resize ?</p>
                                    </div>
                                </div>
                            </div>

                            <div id="sectionGrid" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>Grid samples (WinJSContrib.Grid)</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                                    <div class="sectionSummary">
                                        <p>This control helps you layout items based on a grid matrix, or flexbox. With the grid matrix, items will be arranged to fill all spaces.</p>
                                        <p>If the grid is used with the custom navigator, you will not even have to think about changing the layout on screen resize.</p>
                                    </div>
                                    <div class="link" data-page-action="openFixedHub" data-page-action-args='{ "items": "items10", "multipass": false}'>
                                        FIXED items
                                    </div>
                                    <div class="link" data-page-action="openFlexGrid" data-page-action-args='{ "items": "items200", "multipass": "false"}'>
                                        grid with flexbox layout (no multipass)
                                    </div>
                                    <div class="link" data-page-action="openFlexGrid" data-page-action-args='{ "items": "items200", "multipass": "item"}'>
                                        grid with flexbox layout
                                    </div>
                                </div>
                            </div>

                            <div id="sectionHub" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>Hub samples (WinJSContrib.Hub)</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                                    <div class="sectionSummary">
                                        <p>This control is a hub control alternative. It's meant to be used in conjonction with the custom navigator because it relies on the page events to orchestrate the building of the page.</p>
                                        <p>When you navigate, the hub remember your position when you get back.</p>
                                        <p>If you use grids inside the hub sections, you will be able to use multipass rendereing on the sections or on items to boost performaces</p>
                                    </div>
                                    <!--<div class="link" data-page-action="openFlexGrid" data-page-action-args='{ "items": "items20", "multipass": "item"}'>
                                    Hub with flex layout and 120 items (no multipass)
                                </div>-->
                                    <div class="link" data-page-action="openFlexGrid" data-page-action-args='{ "items": "items200", "multipass": "item"}'>
                                        Hub with flex layout and 1200 items (no multipass)
                                    </div>
                                    <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items20", "multipass": false}'>
                                        Hub with 120 items (no multipass)
                                    </div>
                                    <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items200", "multipass": false}'>
                                        Hub with 1200 items (no multipass)
                                    </div>
                                    <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items20", "multipass": "section"}'>
                                        Hub with 120 items (multipass / section)
                                    </div>
                                    <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items200", "multipass" : "section"}'>
                                        Hub with 1200 items (multipass / section)
                                    </div>
                                    <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items20", "multipass": "item"}'>
                                        Hub with 120 items (multipass / item)
                                    </div>
                                    <div class="link" data-page-action="openHub" data-page-action-args='{ "items": "items200", "multipass" : "item"}'>
                                        Hub with 1200 items (multipass / item)
                                    </div>
                                </div>
                            </div>

                            <div id="sectionDataForms" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>Forms samples (WinJSContrib.DataForm)</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{ layouts: HomeGridLayout }">
                                    <div class="sectionSummary">
                                        <p>This control is for managing and styling data forms.</p>
                                        <p>It wraps form validation, error notifications, and a small css framework to layout your dataform</p>
                                    </div>
                                    <div class="link" data-page-link="/pages/dataform/overview/dataform.html">
                                        simple forms
                                    </div>
                                </div>
                            </div>

                            <div id="sectionDataSource" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>Datasource helpers</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                                    <div class="link" data-page-link="/pages/datasources/simple/datasources.html">
                                        DataSourceManager <p>helps working with filtered and grouped datasources</p>
                                    </div>
                                    <div class="link big" data-page-link="/pages/datasources/customcontrol/datasources.html">
                                        semantic zoom lists <p>custom control wrapping semantic zoom and listviews with a DataSourceManager</p>
                                    </div>
                                </div>
                            </div>

                            <div id="sectionChildViewFlyout" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>ChildView Flyout (WinJSContrib.ChildViewFlyout)</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                                    <div class="sectionSummary">
                                        <p>This control is intended to provide a sub navigation system. A child view is opening as a side flyout and is based on the custom navigator provided in WinJS Contrib.</p>
                                        <p>It's very usefull in a lot of user experience scenarios where a WinJS flyout is to small or to limited, like master-detail views, picking an item in a list, etc.</p>
                                    </div>
                                    <div class="link" data-page-link="/pages/childviewflyout/basics/childviewflyout.html">
                                        sub navigation <p>use child view to provide sub-navigation</p>
                                    </div>
                                    <div class="link" data-page-link="/pages/childviewflyout/picker/childviewflyout.html">
                                        item picker <p>use child view for picking some items</p>
                                    </div>
                                </div>
                            </div>

                            <div id="sectionMiscControls" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>Other controls.</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                                    <div class="link" data-page-link="/pages/tab/tabcontrol.html">
                                        tab control <p>loading tabs from external child pages</p>
                                    </div>
                                    
                                    <div class="link" data-page-link="/pages/semanticzoom/semanticzoom.html">
                                        semantic zoom wrapper <p>helps implement semantic zoom in your controls</p>
                                    </div>
                                </div>
                            </div>

                            <div id="sectionMiscHelpers" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>Helpers</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                                    <div class="link big" data-page-link="/pages/multiview/multiview.html">
                                        <h3>multi-views</h3>
                                        <p>objects to help manage and bootstrap multi-view implementation</p>
                                    </div>
                                    <div class="link big" data-page-link="/pages/contactcard/contactcard.html">
                                        <h3>contact card</h3>
                                        <p>show contact card in one line of code</p>
                                    </div>
                                </div>
                            </div>

                            <div id="sectionMisc" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                                <h2>Search (WinJSContrib.Search)</h2>
                                <div class="mcn-hub-section-content" data-win-control="MCNEXT.UI.GridControl" data-win-options="{layouts: HomeGridLayout}">
                                    <div class="link" data-page-link="/pages/search/search.html">
                                        index and search content
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div id="zoomedout" class="mcn-fullsize" data-win-control="MCNEXT.UI.SemanticZoomWrapper">

                </div>
            </div>
        </section>
    </div>
</body>
</html>
